<template>
    <div ref="node"
         :style="nodeContainerStyle"
         :class="nodeContainerClass">
        <div class="node-header">
            <i :class="iconClass"></i> {{ node.name }}
            <template v-if="node.info.joinType">
                （{{ node.info.joinType === 'ALL' ? '会签' : '或签' }}）
            </template>
            <template v-if="node.info.copy">
                <div style="float:right;">
                    <Poptip trigger="hover" title="抄送用户" :content="node.info.copyUserText" transfer placement="right-start">
                        <span class="fa fa-paper-plane-o"></span>
                    </Poptip>
                </div>
            </template>
        </div>


        <template v-if="node.info.signs.length===0">


            <div class="node-body">

                <template v-if="node.info.allot==='DESIGNUSER'">
                    {{ node.info.userText }}
                </template>
                <template v-if="node.info.allot==='DESIGNROLE'">
                    {{ node.info.roleText }}
                </template>
                <template v-if="node.info.allot==='EVERYONE'">
                    本系统任意用户
                </template>
                <template v-if="node.info.allot==='RUNNINGUSER'">
                    <template v-if="node.info.users.length>0">
                        {{ node.info.userText }}
                    </template>
                    <template v-else>
                        运行时指定用户
                    </template>
                </template>
                <template v-if="node.info.allot==='RUNNINGROLE'">
                    <template v-if="node.info.roles.length>0">
                        {{ node.info.roleText }}
                    </template>
                    <template v-else>
                        运行时指定角色
                    </template>
                </template>
            </div>
        </template>
        <template v-if="node.info.signs.length>0">

            <Poptip trigger="hover" placement="right-start" :width="260" transfer>
                <div slot="content">
                    <div v-for="item in node.info.signs" :key="item.signTime" class="pandx">
                            <Row>
                                <Col span="8"><a href="javascript:void(0);">{{ item.userName }}</a></Col>
                                <Col span="8" style="text-align: center;color:#c5c8ce;">
                                    <Time :time="(new Date(item.signTime)).getTime()"></Time>
                                </Col>
                                <Col span="8" style="text-align: right;font-weight:bolder;">
                                    <span style="color:#19be6b;" v-if="item.signState===1">已同意</span>
                                    <span style="color:#ed4014;" v-if="item.signState===2">被拒绝</span>
                                    <span style="color:#ff9900;" v-if="item.signState===3">被驳回</span>
                                </Col>
                            </Row>
                            <Row style="margin-top:6px;">
                                <Col span="24">
                                    <span v-html="item.description?item.description.replace(/\n/g,'<br>'):''"></span>
                                </Col>
                            </Row>
                            <Row style="margin-top:6px;">
                                <Col span="24" style="color:#c5c8ce;">
                                    {{ item.signTime | formatTime }}
                                </Col>
                            </Row>
                    </div>
                </div>
                <div class="node-body">
                    <template v-if="node.info.allot==='DESIGNUSER'">
                        <span class="node-content">{{ node.info.userText }}</span>
                    </template>
                    <template v-if="node.info.allot==='DESIGNROLE'">
                        <span class="node-content">{{ node.info.roleText }}</span>
                    </template>
                    <template v-if="node.info.allot==='EVERYONE'">
                        <span class="node-content">本系统任意用户</span>
                    </template>
                    <template v-if="node.info.allot==='RUNNINGUSER'">
                        <template v-if="node.info.users.length>0">
                            <span class="node-content">{{ node.info.userText }}</span>
                        </template>
                        <template v-else>
                            <span class="node-content">运行时指定用户</span>
                        </template>
                    </template>
                    <template v-if="node.info.allot==='RUNNINGROLE'">
                        <template v-if="node.info.roles.length>0">
                            <span class="node-content">{{ node.info.roleText }}</span>
                        </template>
                        <template v-else>
                            <span class="node-content">运行时指定角色</span>
                        </template>
                    </template>
                </div>
            </Poptip>
        </template>
        <div :class="footerClass">

        </div>
    </div>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';

@Component({
    components: {},
})
export default class FlowNode extends AbpBase {
    name: string = 'FlowNode';
    @Prop({type: Object, default: {}}) node: any;
    @Prop({type: Number, default:0}) startPosition: number;

    get nodeContainerClass() {
        return {
            'task': this.node.type === 'task',
            'start': this.node.type === 'start',
            'end': this.node.type === 'end',
            'node-container': true,

        };
    }

    get nodeContainerStyle() {

        const left=(parseFloat(this.node.left)*410)/this.startPosition;
        return {
            top: this.node.top,
            left:left + 'px',
        };
    }

    get iconClass() {
        const icons = {};
        icons[this.node.icon] = true;
        return icons;
    }

    get footerClass() {
        return {
            'node-footer': true,
            'default-color': this.node.info.signs.length === 0,
       ==this.node.info.users.length,
            'yes-color': this.node.info.signs.find(i => i.signState === 1),
            'no-color': this.node.info.signs.find(i => i.signState === 2),
            'reject-color': this.node.info.signs.find(i => i.signState === 3),
        };
    }


    clickNode(event) {
        this.$emit('clickNode', event, this.node);
    }

    changeNodePosition() {
        if (this.node.left === (this.$refs.node as any).style.left && this.node.top === (this.$refs.node as any).style.top) {
            return;
        }
        this.$emit('changeNodePosition', {
            nodeId: this.node.id,
            left: (this.$refs.node as any).style.left,
            top: (this.$refs.node as any).style.top,
        });
    }

    showMenu(event) {
        this.$emit('contextmenu', event, this.node);
    }

}
</script>

<style lang="less" scoped>
@import './styles/flow-view-only.less';

.pandx:not(:last-child) {
    border-bottom: 1px solid #e8eaec;
}
.pandx{
    padding-top: 8px;
    padding-bottom: 6px;
}
</style>
